import { create } from 'zustand';

type ContextTarget = {
  id?: string;
  type?: 'canvas' | 'node' | 'edge';
  [key: string]: any;
}
// 定义 store 的状态和操作
type ContextMenuStore = {
  visible: boolean;
  target: ContextTarget,
  top?: number | string;
  left?: number | string;
  right?: number | string;
  bottom?: number | string;
  [key: string]: any;
  showContext: (target: ContextTarget,
    position?: { top?: number | string; left?: number | string; right?: number | string; bottom?: number | string })
    => void;
  closeContext: () => void;
  toggleContext: () => void;
};

// 创建 store
const useContextMenuStore = create<ContextMenuStore>((set) => ({
  visible: false,
  target: {},
  top: undefined,
  left: undefined,
  right: undefined,
  bottom: undefined,

  // 显示菜单并设置位置
  showContext: (target, position?) => set({
    visible: true,
    ...position,
    target
  }),

  // 关闭菜单
  closeContext: () => set({
    visible: false,
  }),

  toggleContext: () => set((state) => ({
    ...state,
    visible: !state.visible,
  }))
}));

export default useContextMenuStore;
